<template>
	<view>
		<view class="activity-wrapper">
			<view class="activity-box">
				<view class="activity-img">
					<image mode="aspectFill" :src="activity.coverImg">
					</image>
				</view>
				<view class="activity-box_bd">
					<view class="activity-title">{{activity.activityName}}</view>
					<view class="activity-category">
						<view>{{ activity.categoryName || '-' }}</view>
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="info-label">活动时间</view>
				<view class="info-value">{{ activity.timeStart }} - {{ activity.timeEnd }}
				</view>
			</view>
		</view>

		<view class="activity-wrapper">
			<view class="wrapper-title">报名人信息</view>
			<view class="form-box">
				<form action="">
					<view class="form-item">
						<view class='form-label'>报名人</view>
						<input class='form-input' v-model="formData.user.username" placeholder="请填写报名人姓名" />
					</view>
					<view class="form-item">
						<view class='form-label'>手机号</view>
						<input class='form-input' v-model="formData.user.phonenumer" placeholder="点击授权获取手机号" />
						<button class="form-wxphone" open-type="getPhoneNumber"
							@getphonenumber="getPhonenumber"></button>
					</view>
				</form>
			</view>
		</view>
		<view class="activity-wrapper" v-if="userInfo.member">
			<view class="info-box" @click="isShowPayType=true">
				<view class="info-label">优惠方式</view>
				<view class="info-value" v-if="userInfo.activityNum>0">
					{{ formData.payType==30? "已选择「活动权益」":"有可用优惠" }}
				</view>
				<view class="info-value" v-else>暂无可用优惠</view>
			</view>
		</view>

		<view class="footer-wrapper">
			<view class="footer-box">
				<view class="footer-box_bd">
					<block v-if="formData.payType==30">活动权益抵扣 1 次</block>
					<block v-else>
						<text>合计：</text>
						<view class="activity-price">
							<text v-if="userInfo.member">{{ `¥ ${activity.memberPrice}` }}</text>
							<text v-else>{{ activity.price>0 ? `¥ ${activity.price}` : "免费" }}</text>
							<view class="activity-viptag" v-if="userInfo.member">
								{{ activity.memberPrice>0 ? "会员价" : "会员免费" }}
							</view>
						</view>
					</block>
				</view>
				<view class="footer-btn" @click="onSubmitOrder">立即支付</view>
			</view>
		</view>

		<!-- 联系客服 -->
		<u-popup :show="isShowPayType" @close="isShowPayType=false">
			<view class="paytype-wrapper">
				<image class="paytype-wrapper_bg" mode="aspectFill" src="/static/img/windowsBg.png">
				</image>
				<view class="paytype-wrapper_hd">
					<text>优惠方式</text>
					<view class="close-btn">
						<u-icon name="close" color="#1A1311" size="24"></u-icon>
						<view class="hotarea" @click="isShowPayType=false"></view>
					</view>
				</view>
				<view class="paytype-wrapper_bd">
					<view class="paytype-box"
						:class="{ 'active': formData.payType==30, 'disable': userInfo.activityNum==0 }"
						@click="selectPayType(30)">
						<view class="paytype-box_bd">
							<view class="paytype-title">活动权益{{formData.payType==30?"「已选择」":""}}</view>
							<view class="paytype-desc">点击可选择使用活动权益进行抵扣</view>
						</view>
						<view class="paytype-box_ft">
							<text>剩余可用：</text>
							<text class="paytype-value">{{ userInfo.activityNum }}</text>
							<text>次</text>
						</view>
					</view>
					<view class="paytype-btn" @click="selectPayType(20)">不使用优惠</view>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		getActivity
	} from '@/api/activity.js';
	import {
		getWxPhone
	} from '@/api/user.js';
	import {
		createOrder,
		payOrder,
		queryOrder
	} from '@/api/order.js';
	import {
		isEmpty
	} from '@/utils/verify.js';
	import {
		wxPayment
	} from '@/utils/util.js';
	import {
		dateFormat
	} from '@/utils/util.js'
	import {
		mapGetters
	} from "vuex";

	export default {
		computed: {
			...mapGetters({
				userInfo: 'userInfo',
			})
		},

		data() {
			return {
				// 页面传参
				options: {},
				// 活动
				activity: null,
				// 订单
				order: null,
				// 订单创建API参数
				formData: {
					buyType: 10, // 产品类型【10=活动 20=营地 30=会员】
					payType: 20, // 支付方式【20=微信支付 30=套餐抵扣】
					activityId: '',
					campId: '',
					user: {
						username: '',
						phonenumer: ''
					}
				},
				// 支付方式弹窗
				isShowPayType: false,
			}
		},
		onLoad(options) {
			console.log(options)
			const that = this
			that.options = options
			that.formData.activityId = options.activityId
			that.formData.user = {
				...that.formData.user,
				...uni.getStorageSync('activityForm')
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 获取当前活动信息
			this.getActivity()
		},

		methods: {

			// 选择付款方式
			selectPayType(payType) {
				if (payType == 30 && this.userInfo.activityNum == 0) return
				this.formData.payType = payType
				this.isShowPayType = false
			},

			// 获取用户信息
			_getUserInfo() {
				uni.showLoading()
				let that = this
				that.$store.dispatch('getUserInfo').then(res => {
					if (that.activity.memberPrice > 0 && res.activityNum > 0) {
						that.formData.payType = 30
					}
				}).finally(res => {
					uni.hideLoading()
				})
			},

			// 获取活动信息
			getActivity() {
				uni.showLoading()
				const that = this
				let {
					activityId
				} = that.options
				getActivity({
					activityId
				}).then(res => {
					let {
						timeStart,
						timeEnd
					} = res.data
					that.activity = {
						...res.data,
						timeStart: dateFormat('YYYY/mm/dd', new Date(timeStart)),
						timeEnd: dateFormat('YYYY/mm/dd', new Date(timeEnd))
					};
					that._getUserInfo()
				}).finally(res => {
					uni.hideLoading()
				})
			},

			// 表单验证
			onVerifyFrom() {
				const that = this
				let {
					username,
					phonenumer
				} = that.formData.user
				that.hasError = isEmpty(username) || isEmpty(phonenumer)
				if (isEmpty(username)) {
					that.errorMsg = '请输入报名人姓名'
				} else if (isEmpty(phonenumer)) {
					that.errorMsg = '请获取手机号'
				}
				if (that.hasError) {
					that.$util.showToast(that.errorMsg)
					return false
				}
				return true
			},

			// 订单提交
			onSubmitOrder() {
				uni.showLoading()
				const that = this
				// 表单验证
				if (!that.onVerifyFrom()) {
					return false
				}
				let orderNo = undefined
				// 请求api
				createOrder(that.formData)
					.then(res => {
						orderNo = res.data.orderNo
						return payOrder({
							"orderNo": orderNo
						})
					}).then(res => {
						uni.setStorageSync('activityForm', that.formData.user)
						if (res.data.needPay) {
							// 发起微信支付
							wxPayment(res.data.result).finally(res => {
								that._queryOrder(orderNo)
							})
						} else {
							that._queryOrder(orderNo)
						}
					}).finally(() => {
						uni.hideLoading()
					})
			},

			// 支付查询
			_queryOrder(orderNo) {
				uni.showLoading()
				let that = this
				queryOrder({
						"orderNo": orderNo
					}).then(res => {
						if (res.data.isPay) {
							that.$util.showSuccess('报名成功')
						} else {
							that.$util.showError('订单未支付')
						}
						setTimeout(() => {
							that.$util.navTo('pages/order/detail', {
								"orderNo": orderNo
							}, 'redirectTo')
						}, 1000)
					})
					.catch(err => {
						console.log(err)
					})
					.finally(res => {
						uni.hideLoading()
					})
			},

			// 获取微信手机号
			getPhonenumber(e) {
				let that = this
				getWxPhone(e.detail.code).then(res => {
					if (res.code == 200) {
						that.formData.user.phonenumer = res.data
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.activity-wrapper {
		background-color: rgba(247, 245, 240, 1);

		.activity-box {
			display: flex;
			padding: 32rpx;
			font-size: 28rpx;
			color: $uni-text-color;
			line-height: 40rpx;

			.activity-img {
				width: 240rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 24rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.activity-box_bd {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.activity-title {
					font-weight: bold;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
				}

				.activity-category {
					color: $uni-text-color-grey;
					display: flex;
					justify-content: space-between;
				}
			}

		}

		.info-box {
			display: flex;
			padding: 32rpx;
			position: relative;
			font-size: 28rpx;

			.info-label {
				color: rgba(0, 0, 0, 0.5);
				min-width: 120rpx;
				padding-right: 32rpx;

			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 32rpx;
				right: 32rpx;
				border-top: 1rpx solid rgba(26, 19, 17, .1);
			}
		}

		.activity-wrapperBottom {
			border-top: 2rpx solid #ebeae5;
			display: flex;
			align-items: center;
			padding-top: 40rpx;

			span {
				height: 30rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 30rpx;
				color: $uni-text-color;
			}

			span:nth-child(1) {
				color: $uni-text-color-grey;
			}
		}


		&+.activity-wrapper {
			margin-top: 24rpx;
		}

		.wrapper-title {
			font-size: 34rpx;
			font-weight: bold;
			padding: 40rpx 32rpx 0 32rpx;
		}

		.form-box {
			padding: 40rpx 32rpx;

			.form-item {
				display: flex;
				align-items: center;
				background: #f2eee7;
				border: 1rpx solid #E5DFD2;
				border-radius: 16rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: $uni-text-color;
				padding: 0 32rpx;
				position: relative;

				&+.form-item {
					margin-top: 24rpx;
				}

				.form-label {
					min-width: 120rpx;
				}

				.form-input {
					padding: 32rpx 0;
					min-height: 40rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					color: $uni-text-color;
					flex: 1;
					background: transparent;
				}

				.form-wxphone {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					opacity: 0;
					z-index: 10;
				}
			}
		}
	}

	.footer-wrapper {
		.footer-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 160rpx;
			background-color: #F7F5F0;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;

			.footer-box_bd {
				flex: 1;
				font-size: 28rpx;
				color: rgba(26, 19, 17, 0.4);
				display: flex;
				align-items: center;

				.activity-price {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(26, 19, 17, 1);

					.activity-viptag {
						font-size: 24rpx;
						line-height: 48rpx;
						color: #393939;
						padding: 0 16rpx;
						border-radius: 24rpx;
						background-image: linear-gradient(65deg, #D3B163, #F7E9B8);
						margin-left: 16rpx;
					}
				}
			}

			.footer-btn {
				min-width: 240rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 96rpx;
				color: #fff;
				background-color: #1A1311;
				padding: 0 32rpx;
				border-radius: 48rpx;
				box-sizing: border-box;

			}
		}
	}

	.paytype-wrapper {
		position: relative;

		.paytype-wrapper_bg {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
		}

		.paytype-wrapper_hd {
			display: flex;
			align-items: center;
			padding: 48rpx 32rpx;
			z-index: 10;
			position: relative;

			text {
				flex: 1;
				font-size: 34rpx;
				font-weight: bold;
			}

			.close-btn {
				position: relative;

				.hotarea {
					opacity: 0;
					position: absolute;
					top: -24rpx;
					left: -24rpx;
					right: -24rpx;
					bottom: -24rpx;
				}
			}
		}

		.paytype-wrapper_bd {
			padding: 0 32rpx;
			z-index: 10;
			position: relative;

			.paytype-box {
				display: flex;
				align-items: center;
				padding: 32rpx;
				border-radius: 16rpx;
				background-color: #fff;
				border: 1rpx solid rgba(26, 19, 17, 1);

				&.active {
					background-color: rgba(247, 245, 240, 1);
					border: 1rpx solid rgba(26, 19, 17, 1);
				}

				&.disable {
					opacity: .6;
				}

				&_bd {
					flex: 1;

					.paytype-title {
						font-size: 28rpx;
						color: #1a1311;
						font-weight: bold;
					}

					.paytype-desc {
						font-size: 24rpx;
						color: #999;
						margin-top: 8rpx;
					}
				}

				&_ft {
					font-size: 24rpx;
					color: #1A1311;

					.paytype-value {
						font-size: 32rpx;
						font-weight: bold;
						margin-right: 8rpx;
					}
				}
			}

			.paytype-btn {
				margin-top: 32rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 96rpx;
				color: #333;
				background-color: #fff;
				border: 1rpx solid #efefef;
				padding: 0 32rpx;
				border-radius: 48rpx;
				box-sizing: border-box;
			}
		}
	}
</style>
